<template>
    <div class="center-view">
        <div class="logo">
            <img src="./imgs/login.png" />
        </div>
        <div>
            <van-form @submit="onSubmit">
                <van-field class="mobile" v-model="mobile" name="mobile" label="手机号" label-width="60px" placeholder="请填写手机号" :rules="[{ pattern, message: '请填写正确的手机号' }]"/>
                <van-field class="password" v-model="password" type="password" name="password" label="密 码" label-width="60px" placeholder="请填写密码" :rules="[{ required: true, message: '请填写密码' }]"/>
                <div style="margin: 30px;">
                    <van-button class="submit" square block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { Form, Field, Button, Toast } from "vant";

Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
export default {
    data() {
        return {
            mobile: "",
            password: "",
            pattern: /^1[3-9]\d{9}$/,
        };
    },
    methods: {
        onSubmit(values) {            
            console.log("submit", values);
            // 发送请求
            this.$http.post()
        },
    },
    created() {
        // 进入时 隐藏底部导航
        // this.$store.commit("global/setFooter", false);
    },

    beforeDestroy() {
        // 离开时 显示底部导航
        // this.$store.commit("global/setFooter", true);
    },
};
</script>

<style lang="scss" scoped>
.center-view{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mobile{
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.password{
    display: flex;
    justify-content: center;
}
.logo {
    width: 280px;
    height: 100px;
    margin-top: 90px;
    margin-left: 50px;
    margin-bottom: 30px;
    text-align: center;
}
.logo img{
    width: 100%;
    height: 100%;
}
.submit{
    width: 180px;
    height: 50px;
    line-height: 50px;
    background-color: #FF6742;
    font-size: 18px;
    color: #fff;
    border: 0;
    border-radius: 30px;
}
</style>
